<template>
    <div class="modal fade" id="settlementModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" @click="agentshow=false">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">结算佣金</h4>
                </div>
                <div class="modal-body form-horizontal">
                    <div class="row">
                        <label class="col-xs-4 text-right">修改佣金状态：</label>
                        <select disabled class="form-control col-xs-8" >
                            <option value="1">已结佣</option>
                            <!-- <option value="2">待结佣</option> -->
                        </select>
                    </div>
                    <div class="row" style="margin-top: 20px">
                        <label class="col-xs-4"></label>
                        <label><input type="radio" name="commissionType" v-model="type" value="1"/>以系统结算佣金为准&nbsp;&nbsp;待结算佣金:&nbsp;<span id="commission" style="float:none;line-height: normal;">{{settlementCommission.pendingCommission}}</span>元</label><br><br>
                        <label class="col-xs-4"></label>
                        <label><input type="radio" name="commissionType" v-model="type" value="2"/>以输入佣金结算</label><br><br><br>
                    </div>
                    <div class="row">
                        <label class="col-xs-4 text-right">结算佣金：</label>
                        <label class="col-xs-4" style="padding-left: 0"><input :readonly="readonlyFlag" placeholder="请输入结算佣金" class="form-control " maxlength="10" style="padding-left: 8px;" width="50" v-model="params.commission" /></label>
                        <label class="col-xs-2" style="height: 34px;line-height: 34px">元</label>
                    </div>
                    <div class="row">
                        <label class="col-xs-4 text-right">备注：</label>
                        <textarea class="form-control" :readonly="readonlyFlag" v-model="params.remark" style="width: 313px;height: 102px;padding-left: 8px;" placeholder="请输入偏差原因"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="settlement">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</template>
<style>

</style>
<script>
    export default{
        props: ["settlementCommission"],
        data(){
            return{
                readonlyFlag:true,
                params : {
                    commissionId: '',
                    commissionType:'1',
                    commissionStatus:"1",
                    commission: '',
                    remark: ''
                },
                type:'1'
            }
        },
        watch:{
            type:function(val,oldVal){
                var _self = this;
                _self.params.commissionType = val;
                if(val=='1'){
                    _self.readonlyFlag = true;
                    //选择系统计算佣金时，清空手动输入的数据
                    _self.params.remark = '';
                    _self.params.commission = '';
                }else if(val == '2'){
                    _self.readonlyFlag = false;
                }
            }
        },
        components:{

        },
        methods:{
            settlement:function(){
                var _self = this;
                var url =  _self.utilHelper.apiUrl+"/api/dealCommission";
                var body = {};
                _self.params.commissionId = _self.settlementCommission.commissionId;
                if(_self.type && _self.type == '1') {
                    _self.params.commission = _self.settlementCommission.pendingCommission;
                }
                body.params = _self.params;
                _self.$http.post(url, body).then((response) => {
                    if(response.body.result == '1') {
                        layer.msg("结佣成功");
                        _self.$emit('initCommissionList');
                        $('#settlementModal').modal('hide');
                        _self.type = 1;
                    }else{
                        layer.msg("结佣失败");
                    }
                })
            }
        }
    }
</script>
